import { useOutlet } from 'react-router-dom';
import { useEffect } from 'react';
import { useChangeTheme } from '@/hooks';
import Header from './header';
import Menu from './menu';

function Layout() {
  const CurrentOutlet = useOutlet();
  const { initTheme } = useChangeTheme();
  console.warn(window);

  useEffect(() => {
    initTheme();
  }, [initTheme]);

  return (
    <div className='w-full h-full flex items-start justify-between rounded relative overflow-hidden'>
      <Header />
      <Menu />
      <div className='flex-1 h-full bg-main'>{CurrentOutlet}</div>
    </div>
  );
}

export default Layout;
